{extend name="public/layout" /}
{block name="head_css"}
    <style>
        .sam-header {
            background-color: #ff7200;
        }

        .sam-header .back,.sam-header .name,.sam-header .edit {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back {
            width: 20%;
            font-size: 0;
        }

        .sam-header .back>a .arrow,.sam-header .back>a .words {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back>a .arrow {
            width: 30%;
            padding-top: 30%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_arrow_back_fff.png');
        }

        .sam-header .back>a .words {
            font-size: 1rem;
        }

        .sam-header .name {
            width: 60%;
            font-size: 1rem;
            color: #fff;
            text-align: center;
        }

        .sam-header .edit {
            width: 20%;
            text-align: right;
            font-size: 1rem;
        }

        .sam-header .back>a,.sam-header .back>a:active {
            color: #fff;
            text-decoration: none;
        }

        .sam-header .edit>a,.sam-header .edit>a:active {
            color: #333;
            text-decoration: none;
        }
        .submit-btn {
            width: 90%;
            box-sizing: border-box;
            padding: 2px 0;
            background-color: #ff7200;
            font-size: 0;
            color: #fff;
            text-align: center;
            margin: 15px auto 0 auto;
            border-radius: 1rem;
        }

        .submit-btn .icon,.submit-btn .words {
            display: inline-block;
            vertical-align: middle;
        }

        .submit-btn .icon {
            width: 10%;
            padding-top: 10%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_btn_publish_fff.png');
            transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
        }

        .submit-btn .words {
            max-width: 50%;
            font-size: .9rem;
        }
        #sam-video-uploader {
            width: 32%;
            background-size: 100%;
            padding-top: 7%;
            margin-top: 2%;
            margin-bottom: 2%;
            text-align: center;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url('/static/index/image/upload_video.png');
            display:inline-block;
        }
        #sam-video-uploader>input {
            display: none;
        }
    </style>
{/block}

{block name="main"}
    <div class="container sam-header">
        <div class="back">
            <a href="{$back_url}">
                <div class="arrow"></div>
            </a>
        </div>
        <div class="name">声学小视频</div>
    </div>
    <form id="form" action="{:url('insert')}" method="post">
        <div class="container sam-white-bg sam-form-line">
            <div class="left">
                <span>&nbsp;&nbsp;</span>标题</div>
            <div class="right">
                <textarea name="title" placeholder="请填写详情信息" rows="5">{$vo.title}</textarea>
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line" style="text-align: center">
            <video src="{$vo.video}" width="100%" height="300"  {if !isset($vo.video)} style="display: none" {/if} id="video"  controls="controls"></video>
            <input type="hidden" name="video" id="video_val" value="{$vo.video}"/>
            <div id="sam-video-uploader">
                <input type="file" name="images" accept="video/*" value="" />
            </div>
        </div>
        <div class="container sam-white-bg sam-form-line progress-container" style="text-align: center;display: none;">
            <div class="progress">
                <div id="progress-bar"  class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="background-color:#ff7200;width:60%;">
                    <span class="sr-only">60% Complete</span>
                </div>
            </div>
        </div>
        <div id="submit" class="submit-btn">
            <div class="icon"></div>
            <div class="words">立即免费发布</div>
        </div>
        {if condition="$vo.id"}
            <input type="hidden" name="id" value="{$vo.id}">
        {/if}
    </form>
{/block}
{block name="footer"}
{/block}
{block name="script"}
    <script src="/static/index/js/qiniu.js?v={$version}"></script>
    <script>
        /*
         * 这部分可以写成外部引入公用
         * */
        $('.sam-form-line .right>.select-text').each(function(index,elm) {
            $(elm).text($(elm).siblings('select').eq(0).find("option[value='-1']").eq(0).text());
        });

        $('.sam-form-line .right>select').change(function(e) {
            selVal = $(this).val();
            selText = $(this).siblings('.select-text').eq(0);
            if(selVal === '-1') {
                selText.removeClass('chosen');
                selText.text($(this).find("option[value='-1']").eq(0).text());
            }else{
                selText.addClass('chosen');
                selText.text($(this).find('option:selected').text());
            }
        });


        $('#sam-video-uploader').find('input[type=file]').click(function(e) {
            e.stopPropagation();
        });

        $('#sam-video-uploader').click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            $(this).find('input[type=file]').click();
        });

        $('#sam-video-uploader').find('input[type=file]').change(function(e) {
            var file = this.files[0];
            if(!file) {
                alert('没有上传文件');
                return false;
            }else if(file.size > 104857600) {
                alert('上传的视频不能超过100M');
                return false;
            }
            var _this = $(this);
            $('.progress-container').css('display','block');
            var observable = qiniu.upload(file,null, '{$token}');
            var observer = {
                error(err){
                    alert('上传失败');
                },complete(res){
                    $('#video_val').val('{$domain}/'+res.key);
                    $('#video').css('display','block');
                    $('#video').attr('src','{$domain}/'+res.key);
                    alert('上传成功');
                    $('.progress-container').css('display','none');
                    _this.val('');
                },  next(res){
                    $('#progress-bar').css('width',(res.total.percent)+'%');
                },
            };
            observable.subscribe(observer);
        });

        $('#submit').on('click',function(){
            var obj = $("#form").serializeArray();
            var url = "{$action}";
            $.post(url,obj,function(data){
                if(data.code != 1){
                    alert(data.msg);
                }else{
                    alert('发布成功');
                    self.location=document.referrer;
                }
            });
        });
        /*
         * 这部分可以写成外部引入公用 END
         * */
    </script>
{/block}
